<template>
  <el-card>
    <div class="toolbar">
      <el-form :inline="true" :model="searchForm" size="small">
        <el-form-item label="客服姓名">
          <el-input v-model="searchForm.staffName" placeholder="按客服姓名搜索"></el-input>
        </el-form-item>
        <el-form-item label="会员信息">
          <el-input v-model="searchForm.memberKeyword" placeholder="ID/昵称"></el-input>
        </el-form-item>
        <el-form-item label="评价时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="pagedEvaluations" border stripe>
      <el-table-column prop="id" label="评价ID" width="80"></el-table-column>
      <el-table-column prop="staffName" label="客服姓名"></el-table-column>
      <el-table-column prop="memberId" label="会员ID"></el-table-column>
      <el-table-column prop="memberNickname" label="会员昵称"></el-table-column>
      <el-table-column prop="rating" label="评分">
        <template #default="scope">
          <el-rate v-model="scope.row.rating" disabled></el-rate>
        </template>
      </el-table-column>
      <el-table-column prop="comment" label="评价内容"></el-table-column>
      <el-table-column prop="evaluationTime" label="评价时间" width="180"></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 16px; justify-content: flex-end;"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50]"
      :total="filteredEvaluations.length"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import dayjs from 'dayjs';

const searchForm = ref({
  staffName: '',
  memberKeyword: '',
  dateRange: [],
});

const allEvaluations = ref(Array.from({ length: 30 }, (_, i) => ({
  id: 1 + i,
  staffName: `客服${['A', 'B', 'C'][i % 3]}`,
  memberId: `${10001 + i}`,
  memberNickname: `用户${1 + i}`,
  rating: [5, 4, 5, 3, 5, 4][i % 6],
  comment: ['服务态度很好', '回复速度很快', '非常专业', '问题没解决', '很耐心', '一般般'][i % 6],
  evaluationTime: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm:ss'),
})));
const filteredEvaluations = ref([...allEvaluations.value]);
const currentPage = ref(1);
const pageSize = ref(10);

const pagedEvaluations = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredEvaluations.value.slice(start, end);
});

const handleSearch = () => {
  let filtered = [...allEvaluations.value];

  if (searchForm.value.staffName) {
    filtered = filtered.filter(e => e.staffName.includes(searchForm.value.staffName));
  }

  if (searchForm.value.memberKeyword) {
    filtered = filtered.filter(e =>
      e.memberId.includes(searchForm.value.memberKeyword) || e.memberNickname.includes(searchForm.value.memberKeyword)
    );
  }

  if (searchForm.value.dateRange && searchForm.value.dateRange.length === 2) {
    const [start, end] = searchForm.value.dateRange;
    filtered = filtered.filter(e => {
      const time = dayjs(e.evaluationTime);
      return time.isAfter(dayjs(start)) && time.isBefore(dayjs(end));
    });
  }

  filteredEvaluations.value = filtered;
  currentPage.value = 1;
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
</script>

<style scoped>
.toolbar {
  margin-bottom: 16px;
}
</style> 